<template>
    <div>
      <!-- 子组件模板 -->
      <h3>子组件1</h3>
      <div>
        <p>我有{{ book }}本书</p>
        <p>我有{{ cpmputer }}电脑</p>
        <button @click="subHouse($parent)">减去父组件一个房子</button>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  const cpmputer = ref('华硕')
  const book = ref(6)

  // 把数据交给外部
  defineExpose({
    cpmputer,
    book  
  })

  // 子组件调用父组件的方法或者数据
  // 通过$parent获取父组件的实例
  // 之后就可以使用父组件的方法或者数据，但是需要注意的是，父组件的方法或者数据是私有的，不能直接访问，只能通过父组件暴露的内容来访问
  // 例如：value.house-- 就是父组件的house减1
  function subHouse(value: any) {
    console.log(value)
    value.house--
    
  }
  </script>
  
  <style scoped>
  /* 子组件样式 */
  div {
    background: linear-gradient(to right, #f6d365, #fda085);
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  div:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
  
  h3 {
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 15px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    font-weight: 500;
    letter-spacing: 1px;
  }
  </style>